<template>
    <div>
        <el-row>
           
          <el-col :span="5" >
              <catalogTree @nodeClick="catalogTreeSelect">
                 <template slot='searchBottom'>
                     <div>
                         <p class="myCollect" @click="getCollect()">我的收藏</p>
                     </div>
                 </template>
              </catalogTree>
          </el-col>
          <el-col :span="19">
              <div class="panelBox">
                    <!-- <div class="filter-container" style="padding:5px;">
                        <el-input v-model="listQuery.name" placeholder="流程定义名称" style="width: 200px;" class="filter-item"
                                @keyup.enter.native="btnQuery"/>

                        <el-dropdown split-button type="primary" @click="btnQuery" class="filter-item">
                            <i class="el-icon-search el-icon--left"></i>查询
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div> -->
                
                    <el-page-header v-show="listType=='collect'" @back="goBack" content="我的收藏" :style="{marginBottom:'20px'}">
                    </el-page-header>
                    <el-row>
                        
                        <el-col :span="24" v-for="row in records">
                            <div class="filter-container processListItem" style="margin-right: 3px;margin-bottom: 3px;">
                                <div v-if="listType == 'collect'" class="collectItem">
                                    <span>{{row.name}}<i class="versionMark">(v{{row.version}})</i></span>
                                    <div  class="btn-down">
                                        <el-dropdown split-button type="primary" @click="btnStartInstance(row)">
                                        发起流程
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item  @click.native="btnImage(row.id)">流程图</el-dropdown-item>
                                        </el-dropdown-menu>
                                        </el-dropdown>

                                    </div>
                                </div>
                                <el-card v-else>
                                    <div slot="header" class="clearfix">
                                        <span>{{row.name}}<i class="versionMark">(v{{row.version}})</i></span>
                                        <div style="position: relative;text-align: right;">
                                            <!-- <el-button type="primary" size="mini" @click="btnImage(row.id)">流程图</el-button>
                                            <el-button type="primary" size="mini" @click="btnStartInstance(row)">发起流程              
                                            </el-button> -->
                                            <el-dropdown split-button type="primary" @click="btnStartInstance(row)">
                                            发起流程
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item  @click.native="btnImage(row.id)">流程图</el-dropdown-item>
                                                <el-dropdown-item  @click.native="collect(row)">收藏</el-dropdown-item>
                                                <el-dropdown-item  @click.native="viewHistory(row)">历史申请</el-dropdown-item>
                                                <el-dropdown-item  @click.native="agentFill(row)">代填</el-dropdown-item>
                                                <el-dropdown-item  @click.native="draftList(row)">草稿</el-dropdown-item>
                                                <el-dropdown-item  @click.native="templateList(row)">范本</el-dropdown-item>
                                            </el-dropdown-menu>
                                            </el-dropdown>

                                        </div>
                                    </div>
                                    <div class="text item" v-show="total>0">
                                        <!-- {{row.description?row.description:'无描述'}} -->
                                        <div v-html="getHtmlOrigin(row.description)"></div>
                                    </div>
                                    <!-- <div class="text item">
                                        {{row.category?row.category:'无命名空间'}}
                                    </div> -->
                                </el-card>
                            </div>
                        </el-col>
                    </el-row>
                    <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                                @pagination="list"/>

                    <el-dialog title="流程图" fullscreen :visible.sync="dialogImageVisible" width="80%">
                        <img :src="imagePath" alt="流程图">
                    </el-dialog>

                    <start-process 
                        v-if="dialogStartInstanceVisible" 
                        ref="startProcess"
                        :visible.sync="dialogStartInstanceVisible"
                        :processDefinition="processDefinition"
                        :ownerUserId = "ownerUserId"
                        :curStartProcess = "curStartProcess"
                        @end="startProcessEnd"
                    ></start-process>
              </div>
           </el-col>
         </el-row>
         <my-history-process ref="myHistoryProcess" v-if="dialogViewVisible" :visible.sync="dialogViewVisible" />
         <select-user ref="selectUser" :visible.sync="selectUserVisible" :appendToBody="true"
                     :multipleSelect="false"
                     @selectUserFinished="selectUserFinished"></select-user>
         <draftList 
            ref="draftList" 
            :visible.sync="dialogDraftList"
            @draftSelect="draftSelect"
         />
         <templateList 
            ref="templateList" 
            :visible.sync="dialogTemplateList"
            @templateSelect="templateSelect"
         />
        
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import {getAction, putAction, postAction, deleteAction} from '@/api/manage'
    import {Message} from 'element-ui'
    import {getToken} from '@/util/auth'
    import StartProcess from "./components/StartProcess";
    import catalogTree from "@/components/catalogTree"
    import myHistoryProcess from "./components/myHistoryProcess"
    import SelectUser from '@/components/select/SelectUser'
    import draftList from "./components/draftList"
    import templateList from "./components/templateList"
    export default {
        name: 'FlowableStartMyProcess',
        components: {StartProcess, Pagination, catalogTree, myHistoryProcess, SelectUser,draftList,templateList},
        data() {
            return {
                dialogViewVisible:false,
                dialogDraftList:false,
                dialogTemplateList:false,
                dicts: [],
                records: null,
                selectedRecords: [],
                total: 0,
                listType:'usu',
                listQuery: {
                    current: 1,
                    size: 10,
                    id: undefined,
                    name: undefined,
                    key: undefined,
                    latestVersion: 'true',
                    suspended: undefined,
                    processDefinitionCategory:undefined
                },
                dialogFormVisible: false,
                dialogImportVisible: false,
                dialogImageVisible: false,
                imagePath: '',
                dialogStartInstanceVisible: false,
                formJson: undefined,
                dialogProcessDefinitionIdentityLinkVisible: false,
                selectedProcessDefinitionId: '',
                selectedProcessDefinitionName: '',
                processDefinition: undefined,
                ownerUserId:'',
                selectUserVisible: false,
                curStartProcess:{}
            }
        },
        beforeCreate() {
            this.getDicts('trueOrFalse').then((res) => {
                this.dicts = res.data.data
            })
        },
        created() {
            this.list()
        },
        methods: {
            list() {
                getAction('/api/sdt-flow/flowable/processDefinition/listMyself', this.listQuery).then(res => {
                    const data = res.data.data
                    this.records = data.records;
                    this.total = data.total
                    this.listType = 'usu'
                    if (data.total == 0) {
                        Message.info('查无可发起的流程')
                    }
                })
            },
            btnQuery() {
                this.listQuery.current = 1
                this.list()
            },
            btnReset() {
                this.listQuery = {
                    current: 1,
                    size: 10,
                    id: undefined,
                    name: undefined,
                    key: undefined,
                    latestVersion: 'true',
                    suspended: undefined
                }
                this.list()
            },
            btnImage(processDefinitionId) {
                this.imagePath = '/api/sdt-flow/flowable/processDefinition/image?processDefinitionId=' + processDefinitionId   + '&time=' + new Date()
                this.dialogImageVisible = true
            },
            collect(row){
                let data = {
                    label: row.name,
                    value: row.key,
                    slot:1,
                    type:'flowCollect'
                }
                postAction('/api/sdt-flow/flowable/sysuser-prefered/save', data).then(res => {
                    this.$message.success(res.data.msg)
                })
            },
            viewHistory(row){
                this.dialogViewVisible = true
                this.$nextTick(()=>{
                    this.$refs.myHistoryProcess.getList(row)
                })
                
            },
            agentFill(row){
                this.ownerUserId = ''
                this.selectUserVisible = true
                this.processDefinition = row
                let self = this;
                if (self.$refs.selectUser.treeData.length == 0) {
                    self.$refs.selectUser.getTreeData()
                }
            },
            getCollect(){
                getAction('/api/sdt-flow/flowable/sysuser-prefered/get-prefer?type=flowCollect').then(res => {
                   // debugger
                    let data = res.data.data.items.map(ele => {
                        return {
                            name:ele.label,
                            key:ele.value
                        }
                    })
                    this.listType = 'collect'
                    this.records = data;
                    this.total = 0
                    if (data.length == 0) {
                        Message.info('暂无收藏流程')
                    }

                })
            },
            btnStartInstance(row) {
                this.ownerUserId = ''
                this.processDefinition = row
                this.curStartProcess = {
                    procDefId:row.id,
                    procDefKey: row.key,
                    procDefName: row.name,
                }
                this.dialogStartInstanceVisible = true
            },
            catalogTreeSelect(node){
                this.listQuery.processDefinitionCategory = node.id
                this.list()
            },
            goBack(){
                this.list()
            },
            getHtmlOrigin(str){
                 let content = str.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
                     .replace(/&amp;/g, '&').replace(/&quot;/g, '"').replace(/&apos;/g, "'");
                return content
            },
            selectUserFinished(selectData) {
                if (!selectData || selectData.length == 0) {
                    Message.error('请先选择用户')
                    return
                }
                this.ownerUserId = selectData.userId
                
                this.dialogStartInstanceVisible = true
                debugger
                this.$nextTick(()=>{
                    this.$refs.startProcess.initAgentApplication(selectData)
                })
              
                //this.form.deptHeadEmpName = selectData.userName
                //this.form.deptHeadEmpId = selectData.userId
                //debugger
                //this.ccToVos = selectData
            },
            draftList(row){
                this.processDefinition = row
                this.curStartProcess = {
                    procDefId:row.id,
                    procDefKey: row.key,
                    procDefName: row.name,
                }
                this.dialogDraftList = true
                let id = row.id
                this.$refs.draftList.getList(id)
            },
            templateList(row){
                this.processDefinition = row
                this.curStartProcess = {
                    procDefId:row.id,
                    procDefKey: row.key,
                    procDefName: row.name,
                }
                this.dialogTemplateList = true
                let id = row.id
                this.$refs.templateList.getList(id)
            },
            draftSelect(data){
                this.dialogStartInstanceVisible = true
                this.$nextTick(()=>{
                    //console.log()
                    this.$refs.startProcess.useDraft(data)
                    this.$refs.startProcess.initData()
                })
              
            },
            templateSelect(data){
                this.dialogStartInstanceVisible = true
                this.$nextTick(()=>{
                    //console.log()
                    this.$refs.startProcess.useTemplate(data)
                    this.$refs.startProcess.initData()
                })
              
            },

        }
    }
</script>

<style lang="scss">
  .versionMark{
      font-style:normal;
      color:#999;
  }
  .myCollect{
      margin:0;
      font-size:14px;
      color: #606266;
      padding-left: 25px;
      line-height: 22px;
  }
  .collectItem{
        line-height: 53px;
        position: relative;
        padding-left: 20px;
        .btn-down{
            position: absolute;
            right: 27px;
            text-align: right;
            top: 2px;
        }
  }
  .processListItem{
      a{
          color: #2c8df2;
          text-decoration: underline;
      }
  }
</style>
